{% extends "base.html" %}

{% block subtitle %}
  Editor View
{% endblock subtitle %}

{% block header_css %}
  {{ super() }}
  <link rel="stylesheet" type="text/css"
        href="/third_party/static/select2/select2.css" media="screen">
  <link rel="stylesheet" type="text/css"
        href="/third_party/static/yui2-2.9.0/yui2-2.9.0.css" media="screen">
{% endblock header_css %}

{% block header_js %}
  {{ super() }}
  <script src="/third_party/static/select2/select2.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
  </script>
{% endblock header_js %}

{% block content %}
  <div ng-controller="EditorExploration" ng-cloak>
    <div class="container-fluid">
      <div class="oppia-content row-fluid">

        <div class="span12">

          <span class="pull-right" style="margin: 10px 50px 0 0">

            <button ng-hide="isPublic" type="button" ng-click="makePublic()">
              Publish
            </button>
            <img class="oppia-help" src="/images/help.png"
                 ui-jq="tooltip" ng-hide="isPublic"
                 title="Click this button to publish your exploration in the gallery, so that others can read it.">

            &nbsp;&nbsp;&nbsp;

            <a class="btn" target="_blank" href="/learn/<[explorationId]>"
               title="Play this exploration in a new window.">
              <i class="icon-play"></i>
            </a>

            &nbsp;&nbsp;&nbsp;

            <a class="btn" ng-click="downloadExploration()"
               title="Download exploration as text.">
              <i class="icon-download-alt"></i>
            </a>

            &nbsp;&nbsp;&nbsp;

            <button type="button" class="btn btn-danger" data-toggle="modal"
                    data-target="#deleteExplorationModal"
                    title="Delete this exploration">
              <i class="icon-trash" title="Delete Exploration"></i>
            </button>
          </span>

          <h3>
            <[explorationTitle]>
            <span ng-show="isPublic" class="label label-info">
              Published
            </span>
          </h3>

          <ul class="nav nav-tabs" id="editorViewTab">
            <li class="active">
              <a data-toggle="tab" href="#explorationMap">Exploration Details</a>
            </li>
            <li>
              <a data-toggle="tab" href="#statsViewer">Exploration Stats</a>
            </li>
            <li ng-show="stateId">
              <a data-toggle="tab" href="#stateEditor">State Editor</a>
            </li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane active" id="explorationMap">
              {% include 'editor/views/editor_metadata.html' %}
              <hr>
              {% include 'editor/views/editor_viz.html' %}
            </div>

            <div class="tab-pane" id="statsViewer">
              {% include 'editor/views/stats_viewer.html' %}
            </div>

            <div class="tab-pane" id="stateEditor" ng-cloak>
              <div ng-view ng-cloak></div>
            </div>
          </div>
        </div>

      </div>
    </div>


    <div class="modal hide fade" id="deleteExplorationModal" ng-model="deleteExplorationModalShown">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h3 id="deleteExplorationModalLabel">Delete Exploration</h3>
      </div>
      <div class="modal-body">
        <p>
          Really delete this exploration? This action cannot be reversed.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn" ng-click="deleteExploration()">Delete</button>
        <button type="button" class="btn" data-dismiss="modal">Cancel</button>
      </div>
    </div>

    <div class="modal hide fade" id="deleteStateModal" ng-model="deleteStateModalShown">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h3 id="deleteStateModalLabel">Delete State</h3>
      </div>
      <div class="modal-body">
        <p>
          Are you sure you want to delete the state "<[getStateName(deleteStateId)]>"? <strong>This action cannot be reversed.</strong>
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn" ng-click="deleteState(deleteStateId)">Delete</button>
        <button type="button" class="btn" data-dismiss="modal">Cancel</button>
      </div>
    </div>

  </div>
{% endblock content %}

{% block footer_js %}
  {{ super() }}
  <script src="/third_party/static/d3js-3/d3.min.js"></script>
  <script async src="/third_party/static/yui2-2.9.0/yui2-2.9.0.js"></script>
  <script>
    {{ include_js_file('assets/js/services/explorationData.js') }}
    {{ include_js_file('editor/EditorExploration.js') }}
    {{ include_js_file('editor/views/GuiEditor.js') }}
    {{ include_js_file('editor/views/InteractiveWidgetPreview.js') }}
  </script>
{% endblock footer_js %}
